import React from 'react';
import { Row, Col, Icon, Button } from 'antd';

class HeadContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  handleClick1() {
    window.location.href = '/subject';
  }

  handleClick2() {
    window.location.href = '/image';
  }

  handleClick3() {
    window.location.href = '/bind';
  }

  handleClick4() {
    window.location.href = '/show';
  }

  handleClick5() {
    window.location.href = '/search';
  }

  handleClick6() {
    window.location.href = '/changelog';
  }

  render() {
    return (
      <div>
        <Row>
          <Col span={4}><h1>DataMap</h1></Col>
          <Col span={2}>
            <h4>
              <Button onClick={this.handleClick1} size="large"
                      style={{ color: '#FFFFFF', background: '#5F9EA0', border: 0 }}>
                <Icon style={{ color: '#FFFFFF'}} type="windows"/>
                <br/>
                主题管理
              </Button>
            </h4>
          </Col>
          <Col span={2}>
            <h4>
              <Button onClick={this.handleClick2} size="large"
                      style={{ color: '#FFFFFF', background: '#5F9EA0', border: 0 }}>
                <Icon style={{ color: '#FFFFFF' }} type="cloud-download"/>
                <br/>
                镜像状态
              </Button>
            </h4>
          </Col>
          <Col span={2}>
            <h4>
              <Button onClick={this.handleClick3} size="large"
                      style={{ color: '#FFFFFF', background: '#5F9EA0', border: 0 }}>
                <Icon style={{ color: '#FFFFFF' }} type="lock"/>
                <br/>
                数据绑定
              </Button>
            </h4>
          </Col>
          <Col span={2}>
            <h4>
              <Button onClick={this.handleClick4} size="large"
                      style={{ color: '#FFFFFF', background: '#5F9EA0', border: 0 }}>
                <Icon style={{ color: '#FFFFFF' }} type="file-text"/>
                <br/>
                数据详情
              </Button>
            </h4>
          </Col>
          <Col span={2}>
            <h4>
              <Button onClick={this.handleClick5} size="large"
                      style={{ color: '#FFFFFF', background: '#5F9EA0', border: 0 }}>
                <Icon style={{ color: '#FFFFFF' }} type="search"/>
                <br/>
                数据搜索
              </Button>
            </h4>
          </Col>
          <Col span={2}>
            <h4>
              <Button onClick={this.handleClick6} size="large"
                      style={{ color: '#FFFFFF', background: '#5F9EA0', border: 0 }}>
                <Icon style={{ color: '#FFFFFF' }} type="rocket"/>
                <br/>
                更新日志
              </Button>
            </h4>
          </Col>
        </Row>
      </div>
    );
  }
}

export default HeadContainer;
